document.addEventListener('DOMContentLoaded', function() {
    // 获取DOM元素
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('fileInput');
    const fileSelectBtn = document.getElementById('fileSelectBtn');
    const filePreview = document.getElementById('filePreview');
    const fileName = document.getElementById('fileName');
    const fileType = document.getElementById('fileType');
    const fileSize = document.getElementById('fileSize');
    const fileThumb = document.getElementById('fileThumb');
    const removeFileBtn = document.getElementById('removeFileBtn');
    const parseFileBtn = document.getElementById('parseFileBtn');
    const optionsContainer = document.getElementById('optionsContainer');
    const generateBtn = document.getElementById('generateBtn');
    const loadingSpinner = document.getElementById('loadingSpinner');
    const resultContainer = document.getElementById('resultContainer');
    const resultContent = document.getElementById('resultContent');
    const downloadBtn = document.getElementById('downloadBtn');
    const newFileBtn = document.getElementById('newFileBtn');
    
    // 当前上传的文件
    let currentFile = null;
    // 当前选择的选项
    let selectedOption = null;
    
    // 文件选择按钮点击事件
    fileSelectBtn.addEventListener('click', function() {
        fileInput.click();
    });
    
    // 文件输入变化事件
    fileInput.addEventListener('change', function(e) {
        handleFiles(e.target.files);
    });
    
    // 拖放区域事件
    dropZone.addEventListener('dragover', function(e) {
        e.preventDefault();
        dropZone.classList.add('dragover');
    });
    
    dropZone.addEventListener('dragleave', function() {
        dropZone.classList.remove('dragover');
    });
    
    dropZone.addEventListener('drop', function(e) {
        e.preventDefault();
        dropZone.classList.remove('dragover');
        handleFiles(e.dataTransfer.files);
    });
    
    // 处理上传的文件
    function handleFiles(files) {
        if (files.length === 0) return;
        
        const file = files[0];
        currentFile = file;
        
        // 显示文件预览
        fileName.textContent = file.name;
        fileType.textContent = file.type || '未知类型';
        fileSize.textContent = formatFileSize(file.size);
        
        // 设置文件缩略图
        setFileThumb(file);
        
        // 显示文件预览区域
        filePreview.style.display = 'block';
    }
    
    // 设置文件缩略图
    function setFileThumb(file) {
        const fileType = file.type;
        let icon = '';
        
        if (fileType.startsWith('image/')) {
            // 如果是图片，显示图片预览
            const reader = new FileReader();
            reader.onload = function(e) {
                fileThumb.innerHTML = `<img src="${e.target.result}" class="img-fluid rounded" alt="预览图">`;
            };
            reader.readAsDataURL(file);
            return;
        }
        
        // 根据文件类型设置图标
        if (fileType.includes('excel') || fileType.includes('spreadsheet')) {
            icon = 'bi-file-earmark-excel';
        } else if (fileType.includes('word') || fileType.includes('document')) {
            icon = 'bi-file-earmark-word';
        } else if (fileType.includes('pdf')) {
            icon = 'bi-file-earmark-pdf';
        } else if (fileType.includes('powerpoint') || fileType.includes('presentation')) {
            icon = 'bi-file-earmark-ppt';
        } else {
            icon = 'bi-file-earmark';
        }
        
        fileThumb.innerHTML = `<i class="bi ${icon}" style="font-size: 5rem; color: #4e73df;"></i>`;
    }
    
    // 格式化文件大小
    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
    
    // 移除文件按钮点击事件
    removeFileBtn.addEventListener('click', function() {
        currentFile = null;
        fileInput.value = '';
        filePreview.style.display = 'none';
        optionsContainer.style.display = 'none';
    });
    
    // 解析文件按钮点击事件
    parseFileBtn.addEventListener('click', function() {
        // 显示选项容器
        optionsContainer.style.display = 'block';
        
        // 滚动到选项容器
        optionsContainer.scrollIntoView({ behavior: 'smooth' });
    });
    
    // 选项卡点击事件
    document.querySelectorAll('.option-card').forEach(card => {
        card.addEventListener('click', function() {
            // 移除所有选项卡的选中状态
            document.querySelectorAll('.option-card').forEach(c => {
                c.classList.remove('selected');
            });
            
            // 添加当前选项卡的选中状态
            this.classList.add('selected');
            
            // 保存选中的选项
            selectedOption = this.dataset.option;
            
            // 启用生成按钮
            generateBtn.disabled = false;
        });
    });
    
    // 生成按钮点击事件
    generateBtn.addEventListener('click', function() {
        if (!currentFile || !selectedOption) return;
        
        // 显示加载动画
        loadingSpinner.style.display = 'block';
        
        // 滚动到加载动画
        loadingSpinner.scrollIntoView({ behavior: 'smooth' });
        
        // 模拟处理过程
        setTimeout(function() {
            // 隐藏加载动画
            loadingSpinner.style.display = 'none';
            
            // 生成结果
            generateResult(currentFile, selectedOption);
            
            // 显示结果容器
            resultContainer.style.display = 'block';
            
            // 滚动到结果容器
            resultContainer.scrollIntoView({ behavior: 'smooth' });
        }, 2000);
    });
    
    // 生成结果
    function generateResult(file, option) {
        let content = '';
        
        switch (option) {
            case 'report':
                content = generateReport(file);
                break;
            case 'presentation':
                content = generatePresentation(file);
                break;
            case 'education':
                content = generateEducation(file);
                break;
            case 'summary':
                content = generateSummary(file);
                break;
            case 'infographic':
                content = generateInfographic(file);
                break;
            case 'video':
                content = generateVideo(file);
                break;
            default:
                content = '<div class="alert alert-danger">未知的选项类型</div>';
        }
        
        resultContent.innerHTML = content;
    }
    
    // 生成工作报告
    function generateReport(file) {
        return `
            <div class="card mb-4">
                <div class="card-header">
                    <h3>工作报告</h3>
                </div>
                <div class="card-body">
                    <h4>文件分析结果</h4>
                    <p>基于您上传的 ${file.name} 文件，我们生成了以下工作报告：</p>
                    
                    <div class="alert alert-info">
                        <p>这是一个示例工作报告。在实际应用中，我们会分析您的文件内容并生成相应的报告。</p>
                    </div>
                    
                    <h5>主要发现</h5>
                    <ul>
                        <li>数据点 1: 示例发现和分析</li>
                        <li>数据点 2: 示例发现和分析</li>
                        <li>数据点 3: 示例发现和分析</li>
                    </ul>
                    
                    <h5>图表分析</h5>
                    <div class="text-center my-4">
                        <img src="https://via.placeholder.com/600x300?text=示例图表" class="img-fluid rounded" alt="示例图表">
                    </div>
                    
                    <h5>结论和建议</h5>
                    <p>根据分析结果，我们提出以下建议：</p>
                    <ol>
                        <li>建议 1: 示例建议内容</li>
                        <li>建议 2: 示例建议内容</li>
                        <li>建议 3: 示例建议内容</li>
                    </ol>
                </div>
            </div>
        `;
    }
    
    // 生成演示幻灯片
    function generatePresentation(file) {
        return `
            <div class="card mb-4">
                <div class="card-header">
                    <h3>演示幻灯片</h3>
                </div>
                <div class="card-body">
                    <h4>幻灯片预览</h4>
                    <p>基于您上传的 ${file.name} 文件，我们生成了以下演示幻灯片：</p>
                    
                    <div class="alert alert-info">
                        <p>这是一个示例演示幻灯片。在实际应用中，我们会分析您的文件内容并生成相应的幻灯片。</p>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <div class="card">
                                <img src="https://via.placeholder.com/300x200?text=幻灯片1" class="card-img-top" alt="幻灯片1">
                                <div class="card-body">
                                    <h5 class="card-title">标题幻灯片</h5>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="card">
                                <img src="https://via.placeholder.com/300x200?text=幻灯片2" class="card-img-top" alt="幻灯片2">
                                <div class="card-body">
                                    <h5 class="card-title">内容幻灯片</h5>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="card">
                                <img src="https://via.placeholder.com/300x200?text=幻灯片3" class="card-img-top" alt="幻灯片3">
                                <div class="card-body">
                                    <h5 class="card-title">结论幻灯片</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
    
    // 生成教育课件
    function generateEducation(file) {
        return `
            <div class="card mb-4">
                <div class="card-header">
                    <h3>教育课件</h3>
                </div>
                <div class="card-body">
                    <h4>课件内容</h4>
                    <p>基于您上传的 ${file.name} 文件，我们生成了以下教育课件：</p>
                    
                    <div class="alert alert-info">
                        <p>这是一个示例教育课件。在实际应用中，我们会分析您的文件内容并生成相应的课件。</p>
                    </div>
                    
                    <h5>学习目标</h5>
                    <ul>
                        <li>目标 1: 示例学习目标</li>
                        <li>目标 2: 示例学习目标</li>
                        <li>目标 3: 示例学习目标</li>
                    </ul>
                    
                    <h5>知识点</h5>
                    <div class="accordion" id="accordionExample">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    知识点 1
                                </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    这是知识点 1 的详细内容。在实际应用中，这里会包含从您的文件中提取的相关信息。
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingTwo">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    知识点 2
                                </button>
                            </h2>
                            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    这是知识点 2 的详细内容。在实际应用中，这里会包含从您的文件中提取的相关信息。
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <h5 class="mt-4">练习题</h5>
                    <div class="card mb-3">
                        <div class="card-body">
                            <h6>问题 1:</h6>
                            <p>这是一个示例问题。在实际应用中，这里会包含基于您文件内容生成的问题。</p>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="q1" id="q1a">
                                <label class="form-check-label" for="q1a">选项 A</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="q1" id="q1b">
                                <label class="form-check-label" for="q1b">选项 B</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="q1" id="q1c">
                                <label class="form-check-label" for="q1c">选项 C</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
    
    // 生成内容摘要
    function generateSummary(file) {
        return `
            <div class="card mb-4">
                <div class="card-header">
                    <h3>内容摘要</h3>
                </div>
                <div class="card-body">
                    <h4>文件摘要</h4>
                    <p>基于您上传的 ${file.name} 文件，我们生成了以下内容摘要：</p>
                    
                    <div class="alert alert-info">
                        <p>这是一个示例内容摘要。在实际应用中，我们会分析您的文件内容并生成相应的摘要。</p>
                    </div>
                    
                    <h5>主要内容</h5>
                    <p>这里是文件的主要内容摘要。在实际应用中，这里会包含从您的文件中提取的关键信息。</p>
                    
                    <h5>关键词</h5>
                    <div class="mb-3">
                        <span class="badge bg-primary me-2">关键词1</span>
                        <span class="badge bg-primary me-2">关键词2</span>
                        <span class="badge bg-primary me-2">关键词3</span>
                        <span class="badge bg-primary me-2">关键词4</span>
                        <span class="badge bg-primary me-2">关键词5</span>
                    </div>
                    
                    <h5>重点段落</h5>
                    <blockquote class="blockquote">
                        <p>这是从文件中提取的重点段落。在实际应用中，这里会包含从您的文件中提取的最重要的内容。</p>
                    </blockquote>
                </div>
            </div>
        `;
    }
    
    // 生成信息图表
    function generateInfographic(file) {
        return `
            <div class="card mb-4">
                <div class="card-header">
                    <h3>信息图表</h3>
                </div>
                <div class="card-body">
                    <h4>图表预览</h4>
                    <p>基于您上传的 ${file.name} 文件，我们生成了以下信息图表：</p>
                    
                    <div class="alert alert-info">
                        <p>这是一个示例信息图表。在实际应用中，我们会分析您的文件内容并生成相应的图表。</p>
                    </div>
                    
                    <div class="text-center my-4">
                        <img src="https://via.placeholder.com/800x400?text=信息图表" class="img-fluid rounded" alt="信息图表">
                    </div>
                    
                    <h5>图表说明</h5>
                    <p>这里是图表的说明文字。在实际应用中，这里会包含对生成的图表的详细解释。</p>
                    
                    <h5>数据来源</h5>
                    <p>数据来源于您上传的文件。在实际应用中，这里会详细说明数据的来源和处理方式。</p>
                </div>
            </div>
        `;
    }
    
    // 生成演示视频
    function generateVideo(file) {
        return `
            <div class="card mb-4">
                <div class="card-header">
                    <h3>演示视频</h3>
                </div>
                <div class="card-body">
                    <h4>视频脚本</h4>
                    <p>基于您上传的 ${file.name} 文件，我们生成了以下演示视频脚本：</p>
                    
                    <div class="alert alert-info">
                        <p>这是一个示例视频脚本。在实际应用中，我们会分析您的文件内容并生成相应的视频脚本。</p>
                    </div>
                    
                    <h5>视频分镜</h5>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <div class="card">
                                <img src="https://via.placeholder.com/300x200?text=场景1" class="card-img-top" alt="场景1">
                                <div class="card-body">
                                    <h5 class="card-title">场景 1: 介绍</h5>
                                    <p class="card-text">这是场景 1 的描述。在实际应用中，这里会包含基于您文件内容生成的场景描述。</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="card">
                                <img src="https://via.placeholder.com/300x200?text=场景2" class="card-img-top" alt="场景2">
                                <div class="card-body">
                                    <h5 class="card-title">场景 2: 主要内容</h5>
                                    <p class="card-text">这是场景 2 的描述。在实际应用中，这里会包含基于您文件内容生成的场景描述。</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="card">
                                <img src="https://via.placeholder.com/300x200?text=场景3" class="card-img-top" alt="场景3">
                                <div class="card-body">
                                    <h5 class="card-title">场景 3: 结论</h5>
                                    <p class="card-text">这是场景 3 的描述。在实际应用中，这里会包含基于您文件内容生成的场景描述。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <h5>脚本内容</h5>
                    <div class="card">
                        <div class="card-body">
                            <pre class="mb-0">【场景 1: 介绍】
画面: 标题页面显示
旁白: "欢迎观看这个基于您提供的文件生成的演示视频。"

【场景 2: 主要内容】
画面: 显示文件中的关键信息
旁白: "根据您提供的文件，我们发现了以下关键信息..."

【场景 3: 结论】
画面: 总结页面
旁白: "总结来说，这些信息表明..."</pre>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
    
    // 下载按钮点击事件
    downloadBtn.addEventListener('click', function() {
        if (!resultContent.innerHTML) return;
        
        // 创建一个新的HTML文档
        const html = `
            <!DOCTYPE html>
            <html lang="zh-CN">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>生成结果</title>
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
                <style>
                    body {
                        padding: 2rem;
                    }
                </style>
            </head>
            <body>
                <div class="container">
                    <h1 class="mb-4">生成结果</h1>
                    ${resultContent.innerHTML}
                </div>
                <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
            </body>
            </html>
        `;
        
        // 创建Blob对象
        const blob = new Blob([html], { type: 'text/html' });
        
        // 创建下载链接
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = '生成结果.html';
        
        // 触发下载
        document.body.appendChild(a);
        a.click();
        
        // 清理
        setTimeout(function() {
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }, 0);
    });
    
    // 处理新文件按钮点击事件
    newFileBtn.addEventListener('click', function() {
        // 重置状态
        currentFile = null;
        selectedOption = null;
        fileInput.value = '';
        
        // 隐藏结果容器和选项容器
        resultContainer.style.display = 'none';
        optionsContainer.style.display = 'none';
        filePreview.style.display = 'none';
        
        // 移除所有选项卡的选中状态
        document.querySelectorAll('.option-card').forEach(card => {
            card.classList.remove('selected');
        });
        
        // 禁用生成按钮
        generateBtn.disabled = true;
        
        // 滚动到顶部
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
});